<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 3333px;
        }
        .smallpic{
            width: 450px;
            height: 450px;
            border: 1px solid #ccc;
            margin: 100px;
            position: relative;
        }
        .smallpic .zoom{
            width: 338px;
            height: 338px;
            border: 1px solid #9e9e9e;
            background-color: #ffc107;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.5;
            filter: alpha(opacity=50);
            cursor: move;
        }
        .bigpic{
            position: absolute;
            top: 100px;
            left: 600px;
            width: 800px;
            height: 800px;
            border: 1 solid #ccc;
            overflow: hidden;
        }
        .bigpic img{
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="smallpic" id="smallpicbox">
        <img src="../images/Lappland.jpg" alt="">
        <div class="zoom" id="zoom"></div>
    </div>
    <div class="bigpic" id="bigpicbox">
        <img src="../images/lappland1.jpg" id="datu">
    </div>
    <script>
        var smallpicbox=document.getElementById("smallpicbox");
        var zoom=document.getElementById("zoom");
        var datu=document.getElementById("datu");
        var smallpicboxJingLeft=getAllX(smallpicbox);
        var smallpicboxJingTop=getAllY(smallpicbox);
        smallpicbox.onmousemove=function(event){
            var x=event.pageX-smallpicboxJingLeft;
            var y=event.pageY-smallpicboxJingTop;
            var zoomleft=x-338/2;
            var zoomtop=y-338/2;
            if(zoomleft<0){
                zoomleft=0;
            }else if(zoomleft>450-338){
                zoomleft=450-338;
            }
            if(zoomtop<0){
                zoomtop=0;
            }else if(zoomtop>450-338){
                zoomtop=450-338;
            }
            zoom.style.left=zoomleft+"px";
            zoom.style.top=zoomtop+"px";
            datu.style.left=-zoomleft*1.79+"px";
            datu.style.top=-zoomtop*1.79+"px";
        }
        function getAllY(o){
            var allY=o.offsetTop;
            while(o==o.offsetParent){
                allY+=o.offsetTop+Number(getComputedStyle(o)["border-top-width"]);
            }
            return allY;
        }
        function getAllX(o){
            var allX=o.offsetLeft;
            while(o==o.offsetParent){
                allX+=o.offsetLeft+Number(getComputedStyle(o)["border-left-width"]);
            }
            return allX;
        }
    </script>
</body>
</html>